<template>
  <PullRefresh
    v-if="listPagination.data.length"
    v-model="listPagination.isListRefreshIng"
    @refresh="onListRefresh"
  >
    <List
      v-model="listPagination.isListLoading"
      error-text="请求失败，点击重新加载"
      :finished-text="
        listPagination.data >= listPagination.pageSize ? '没有更多了' : ''
      "
      :immediate-check="immediateCheck"
      :error.sync="listPagination.isListLoadingError"
      :finished="listPagination.isListFinished"
      @load="onListLoad"
    >
      <slot v-for="item of listPagination.data" v-bind="{ item }"></slot>
    </List>
  </PullRefresh>
  <div v-else class="wrapper">
    <Loading v-if="listPagination.isFetching" type="spinner" color="#1989fa" />
    <Empty v-else image="search" description="空空如也" />
  </div>
</template>

<script>
import PullRefresh from '@/widgets/PullRefresh'
import List from '@/widgets/List'
import Empty from '@/widgets/Empty'
import Loading from '@/widgets/Loading'
import listLoader from '@/mixin/list-loader'

export default {
  name: 'ListViewCpt',
  mixins: [listLoader],
  components: {
    PullRefresh,
    List,
    Empty,
    Loading
  },
  props: {
    request: {
      type: [Object, Function],
      require: true
    },
    requestParameter: {
      type: [Object],
      default() {
        return {}
      }
    },
    resultDataKey: {
      type: [String],
      default() {
        return ''
      }
    },
    resultDataFormatter: {
      type: [Function]
    },
    immediateCheck: {
      type: Boolean,
      default: true
    },
    isPaging: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      searchForm: {
        ...this.requestParameter
      }
    }
  },
  created() {
    if (!this.isPaging) {
      this.listPagination.pageSize = 1000000000
    }
  },
  mounted() {
    if (this.immediateCheck) {
      this.initListData()
    }
  },
  methods: {
    onSearchBefore() {
      this.searchForm = { ...this.requestParameter }
    },
    initListData() {
      this.onSearch()
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
}
</style>
